<template>
	<view>
		<uni-nav-bar v-if="tabbarIndex<3" :title="navbar[tabbarIndex]">
			<view slot="left"></view>
			<view slot="right">
				<u-icon name="plus" @click="actionShow=true"></u-icon>
			</view>
		</uni-nav-bar>
		<template v-if="tabbarIndex===0">
			<view>
				<u-list :height="listHeight" class="u-list">
					<u-list-item v-for="(item,index) in vuex_conversational_list" :key="item.id">
						<Conversational :conversational="item"
							:unreadcount="vuex_conversational_unreadcount_list[item.conversationalId]">
						</Conversational>
					</u-list-item>
				</u-list>
			</view>
		</template>
		<u-tabbar :value="tabbarIndex" @change="tabbarChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="lychat" icon="home" @click="tabbarIndex=0"></u-tabbar-item>
			<u-tabbar-item text="好友" icon="photo" @click="tabbarIndex=1"></u-tabbar-item>
			<u-tabbar-item text="好友" icon="photo" @click="tabbarIndex=2"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="tabbarIndex=3"></u-tabbar-item>
		</u-tabbar>
		<u-action-sheet :actions="actions" @select="actionsSelect" closeOnClickOverlay :show="actionShow"
			@close="actionShow=false">
		</u-action-sheet>
		<!--创建群组-->
		<u-modal :show="createModel.show" closeOnClickOverlay @confirm="createGroup" @close="createModel.show = false"
			title="创建群组">
			<view slot="default">
				<u--input placeholder="请输入群名" v-model="createModel.groupName"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import Conversational from '@/components/Conversational/Conversational.vue'
	import conversational from '@/common/api/conversational.js'
	import groupApi from '@/common/api/group.js'
	export default {
		data() {
			return {
				listHeight: 0,
				tabbarIndex: 0,
				navbar: ['laychat', '好友', '群组', '我的'],
				actions: [{
						name: '查询好友'
					},
					{
						name: '创建群组',
						type: 'modal',
						show: function(than) {
							than.createModel.show = true;
						}
					}
				],
				actionShow: false,
				createModel: {
					show: false,
					groupName: ''
				}
			}
		},
		onLoad() {
			conversational.list();
			conversational.listUnreadCount();
		},
		mounted() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.listHeight = res.screenHeight - uni.$u.getPx('45px') - uni.$u.getPx('51px') - uni.$u
						.getPx('10upx');
				}
			})
		},
		methods: {
			actionsSelect(select) {
				let type = select.type;
				console.log(select)
				if (type === 'modal') {
					select.show(this);
				}
			},
			createGroup() {
				if (!this.createModel.groupName) {
					this.$u.toast('请输入群组');
					return;
				}
				groupApi.createGroup({
					"groupName": this.createModel.groupName
				}).then(res => {
					this.$u.toast('创建成功');
					this.createModel.show = false;
				}).catch(err => {
					this.createModel.show = false;
				})
			}
		}
	}
</script>

<style>
	.u-list {
		margin-bottom: 10upx;
	}
</style>
